<template>
	<view class="moto-page">
		<van-nav-bar title="摩托详情" left-text="返回" left-arrow @click-left="Back" />
		<view class="moto-wrap">
			<!-- 摩托照片 -->
			<img :src="moto.photo">
			<!-- 摩托详情 -->
			<view class="moto-info">
				<h3 class="name">{{moto.carName}}</h3>
				<p class="price">厂家指导价：￥{{moto.price - 500}} - {{moto.price}}</p>
				<p class="mark">人气值： {{moto.mark}} <van-icon name="fire" color="#FF5924" /></p>
				<p class="color">最热门颜色：{{moto.gender}} <van-icon name="diamond" color="#5CDC5C" /></p>
				<p class="score"><van-rate v-model="score" color="#ffd21e" readonly /> 口碑评分 {{score}}</p>
				<!-- 标签栏 -->
				<p class="tag">
					<text>人气榜No.{{random.int(1,20)}}</text>
					<text>口碑榜No.{{random.int(1,20)}}</text>
					<text>{{moto.carName}}</text>
					<text>精工制造</text>
				</p>
				<!-- 二手信息 -->
				<view class="sell">
					<view>
						<p>经销商</p>
						<text>西安{{random.int(1,10)}}家</text>
					</view>
					<view class="line"></view>
					<view class="ershou">
						<p>二手摩托</p>
						<text>￥ {{random.int(39999,89999)}}</text>
					</view>
					<view class="line"></view>
					<view>
						<p>摩友圈</p>
						<text>{{random.float(1, 50).toFixed(1)}}万人</text>
					</view>
				</view>
			</view>
		</view>
		<van-action-bar>
			<van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
			<van-action-bar-button type="warning" text="获取底价" />
		</van-action-bar>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	import $api from '../../request/index.js'

	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import random from 'random';

	onLoad((payload) => search = payload.type)

	let moto = ref([])
	let search = ''

	let score = random.float(1.0, 5.0).toFixed(1) * 1

	onShow(() => {
		$api.get('/moto/car/findCar?carName=' + search).then(res => {
			console.log(res)
			moto.value = res.data[0]
		})
	})

	const Back = () => uni.navigateBack()
</script>

<style>
	.moto-wrap img {
		display: block;
		margin: 40rpx auto;
		width: 70%;
		height: 400rpx;

	}

	.moto-info {
		height: calc(100vh - 296px);
		overflow-y: scroll;
		padding: 20rpx;
	}

	.name {
		padding: 10rpx;
	}

	p {
		padding: 10rpx 0;
	}

	.price {
		font-size: 28rpx;
		font-weight: bolder;
		color: #FF5924;
	}

	.mark {
		font-size: 32rpx;
		font-weight: bolder;
	}

	.color {
		font-size: 14px;
		color: #777D8D;
	}

	.tag {
		font-size: 12px;
		color: #777D8D;
		margin: 20rpx 0;
	}

	.tag>text {
		background-color: #F5F5F5;
		padding: 10rpx;
		border-radius: 5px;
		margin-right: 24rpx;
	}

	.sell {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		font-weight: bolder;
		padding: 20rpx 0;
		border-top: 2px solid #F8F9FB;
		border-bottom: 20rpx solid #F8F9FB;
	}

	.sell>view {
		width: 30%;
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.sell text {
		color: #777D8D;
		font-size: 14px;
	}

	.line {
		width: 2px !important;
		height: 30px;
		background-color: #eee;
	}
</style>